<template>
  <el-button
    class="lefttoggle"
    size="small"
    circle
    icon="el-icon-arrow-left"
    @click="onlefttoggle"
  ></el-button>
</template>

<script>
export default {
  data() {
    return {};
  },
  //外部属性
  props: {
    width: String
  },
  model: {
    prop: "width",
    event: "change"
  },
  //内部方法
  methods: {
    initPage() {},
    onlefttoggle() {
      const aiside = this.$parent.$parent;
      if (!aiside.collapsed) {
        if (!aiside.initWidth) aiside.initWidth = this.width;
        this.$emit("change", "70px");
        aiside.$el.classList.add("collapsed");
      } else {
        this.$emit("change", aiside.initWidth);
        aiside.$el.classList.remove("collapsed");
      }
      aiside.collapsed = !aiside.collapsed;
      this.$emit("onToggle", aiside.collapsed);
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
